<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/6/4
  Time: 15:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="commons/header.jsp"%>
<style>
    .modal-dialog {
        width: 680px;
    }
    .fileBtn {
        vertical-align: bottom;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 0;
    }
    .outer-file-box {
        text-decoration: none;
        color: #ffffff;
        background-color: #d9534f;
        font-weight: 400;
        padding: 6px 12px;
        line-height: 1.42857143;
        font-size: 14px;
        text-align: center;
        display: inline-block;
        position: relative;
        border: 1px solid #d9534f;
        top: 1px;
        border-radius: 4px;
    }
    .outer-file-box:hover {
        text-decoration: none;
        color: #ffffff;
    }
    .outer-file-box .fileBtn {
        opacity: 0;
        position: absolute;
        top: 0;
        width: 100%;
        right: 0;
        font-size: 100px;
        cursor: pointer;
    }
</style>
<div style="background-color: #ffffff; border-radius: 3px; padding: 12px;margin-top: 20px">
    <form class="form-inline" onsubmit="javascript: return false;">
        <div class="form-group">
            <label for="name">用户名: </label>
            <input autocomplete="off" class="form-control" id="name" style="width: 150px">
        </div>
        <div class="form-group">
            <label for="gender">性别: </label>
            <select class="form-control" id="gender">
                <option value="-1">全部</option>
                <option value="F">女</option>
                <option value="M">男</option>
            </select>
        </div>
        <div class="form-group">
            <label for="status">状态: </label>
            <select class="form-control" id="status">
                <option value="-1">全部</option>
                <option value="1">激活</option>
                <option value="0">未激活</option>
            </select>
        </div>
        <div class="form-group">
            <label for="email">邮件: </label>
            <input autocomplete="off" class="form-control" id="email" style="width: 150px">
        </div>
        <div class="form-group">
            <label>注册日期: </label>
            <input class="form-control" readonly autocomplete="off" id="beginRegisterDate" style="width: 150px"> -
            <input autocomplete="off" readonly class="form-control" id="endRegisterDate" style="width: 150px">
        </div>
        <div class="form-group">
            <button class="btn btn-danger" onclick="querySearch()">搜索</button>
            <button autocomplete="off" class="btn btn-danger" onclick="resetSearch()">重置</button>
        </div>

        <div class="form-group">
            <%--                    <button class="btn btn-info" onclick="analyzerData()">统计分析</button>--%>
            <button onclick="downloadExcel()" class="btn btn-success">导出</button>
            <!--                    <button onclick="showLoading()" class="btn btn-success">遮罩</button>-->
            <a class="outer-file-box" href="javascript: void(0)">
                导入 <input class="fileBtn" onchange="uploadExcel(this)" type="file">
            </a>
            <button  class="btn btn-success" href="javascript: void(0)">
                <a style="vertical-align: bottom;" href="http://localhost:8080/admin/template/template.xls">下载模板</a>
            </button>
        </div>
    </form>



    <table id="userDataTable" class="table-hover table-bordered table-striped">

    </table>

<%--    查看地址模态框--%>
    <div class="modal" id="showAddressModal" data-backdrop="static">
        <div class="modal-dialog" style="width: 900px">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" onclick="addressDestoryTableAndHideModal()">
                        <span>&times;</span>
                    </button>
                    <h3 class="modal-title">收货地址</h3>
                </div>
                <div class="modal-body">
                    <table id="addressDataTable" class="table table-striped"></table>
                </div>
            </div>
        </div>
    </div>

    <%--    查看购物车模态框--%>
    <div class="modal" id="showCartModal" data-backdrop="static">
        <div class="modal-dialog" style="width: 900px">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" onclick="cartDestoryTableAndHideModal()">
                        <span>&times;</span>
                    </button>
                    <h3 class="modal-title">购物车</h3>
                </div>
                <div class="modal-body">
                    <table id="cartDataTable" class="table table-striped"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<%@include file="commons/footer.jsp"%>
<script type="text/javascript">

    //时间
    $('#beginRegisterDate,#endRegisterDate').datetimepicker({
        // 格式化 yyyy-mm-dd hh:ii:ss 年-月-日 时-分-秒
        format: 'yyyy-mm-dd hh:ii:ss'
    });

    $('#userDataTable').bootstrapTable({
        //访问地址
        url:"http://localhost:8080/user/list",
        //请求方法
        method:'get',
        //列配置
        columns:[
            // title是表头的名字， field是返回的数据的字段名，align:'center'表示居中的意思
            {title:'ID',field:'uId',align:'center'},
            {title:'姓名',field:'uName',align:'center'},
            {title:'性别',field:'uSex',align:'center',formatter:formatSex},
            {title:'状态',field:'uStatus',align:'center',formatter:formatStatus},
            {title:'电话',field:'uPhone',align:'center'},
            {title:'邮件',field:'uEmail',align:'center'},
            {title:'余额',field:'uBalance',align:'center'},
            {title:'注册日期',field:'uRegisterDate',align:'center',formatter:formatRegisterData},
            {title:'操作',align:'center',formatter:formatoperation}
            ],

        pagination: true,  //表示使用分页
        queryParamsType:'',
        queryParams:queryParams,
        pageNumber: 1,
        pageSize: 10,
        sidePagination: 'server', //枚举值：client  server, 默认值是client
        // pageList: [10, 15, 20],   // 切换每页显示多少条数据
    });

    function queryParams (params) {
        /**
         * 无论是 "初始化" 或者 "refresh" 都会执行该方法，来获取请求的参数.
         * 所以我们无论是 "初始化" 或者 “refresh” 都去获取表单的数据
         */
        var name = $('#name').val();  //获取查询表单name的值
        var gender = $('#gender').val();
        var status = $('#status').val();
        var email = $('#email').val();
        var begin =  $('#beginRegisterDate').val();
        var end = $('#endRegisterDate').val();

        params.name = name;
        params.gender = gender;
        params.status = status;

        params.email = email;
        params.begin = begin;
        params.end = end;
        return params;
    }


    /**
     * 格式化性别， 格子中的数据最终显示取决于该函数的返回值
     * @param value 当前格子的值
     * @param row   当前格子所在行的值
     * @param index 索引
     */
    //格式化性别
    function formatSex(value) {
        return value=="F"?"女":"男";
    }
    //格式化状态:0表示未激活，1表示激活
    function formatStatus(value) {
        if(value==1){
            return '<label class="label label-success">激活</label>';
        }else{
            return '<label class="label label-danger">未激活</label>';
        }
    }
    //格式化时间
    function formatRegisterData(value) {
        return moment(value).format("YYYY-MM-DD hh:mm:ss");
    }

    //格式化操作
    function formatoperation(value,row) {
        var btns =  '<button class="btn btn-info btn-xs" onclick="showTakeDeliveryAddress(' + row.uId + ')">查看收货地址</button>' +
            '  <button onclick="showShoppingCartData(' + row.uId + ')" class="btn btn-primary btn-xs">查看购物车</button>';
        //如果用户是未激活状态, 添加激活按钮
        if(row.uStatus ==1){
            btns += '  <button class="btn btn-danger btn-xs" onclick="activeUser(' + row.uId +','+ row.uStatus +')">禁用</button>'
        }else{
            btns += '  <button class="btn btn-success btn-xs" onclick="activeUser(' + row.uId+','+ row.uStatus +')">激活</button>'
        }
        return btns;
    }

    //激活或者禁用用户
    function activeUser(uId,uStatus) {
        $.ajax({
            url:'http://localhost:8080/user/activate',
            data:{uId:uId,uStatus:uStatus},
            type:'get',
            success:function (_data) {
                var result=JSON.parse(_data);
                if(result>0){
                    //刷新页面
                    $('#userDataTable').bootstrapTable('refresh');
                }else{
                    Lobibox.notify('info',{
                        delay:2000,//持续时间
                        title:'提示',
                        msg: '激活失败, 请联系管理员',
                        size:'mini',// normal, mini, large  大小
                    })
                }
            }
        })
    }

    //查看收货地址
    function showTakeDeliveryAddress(userId) {
        $('#showAddressModal').modal('show');
        $('#addressDataTable').bootstrapTable({
            //访问地址
            url:'http://localhost:8080/user/showAddress?uId='+userId,
            //请求方法
            method:'get',
            //列配置
            columns:[
            // title是表头的名字， field是返回的数据的字段名，align:'center'表示居中的意思
                {title:'收货人姓名',field:'aName',align:'center'},
                {title:'收货人电话',field:'aPhone',align:'center'},
                {title:'收货地址',field:'aDetail',align:'center'},
                {title:'默认地址',field:'aState',align:'center',formatter:formataddress},
            ]
        })
    }
    //默认地址
    function formataddress(value) {
        if(value==1){
            return '<labal class="label label-success">默认</labal>';
        }else{
            return '<labal class="label label-danger">否</labal>';
        }
    }

    //隐藏模态框
    function addressDestoryTableAndHideModal() {
        $('#showAddressModal').modal('hide');
        // 因为模态窗中的表格, 没有分页，所以将数据直接缓存在客户端，当重新请求的时候并不会发送网络请求，
        // 导致看不同用户的收货地址的时候, 看到的数据是上一次的，所以每次影藏要将表格销毁掉。
        $('#addressDataTable').bootstrapTable('destroy'); // destroy是固定值
    }

    //查看购物车
    function showShoppingCartData(userId) {
        $('#showCartModal').modal('show');
        $('#cartDataTable').bootstrapTable({
            //访问地址
            url:'http://localhost:8080/user/showShoppingCart?uId='+userId,
            method:'get',
            columns:[
                // title是表头的名字， field是返回的数据的字段名，align:'center'表示居中的意思
               {title:'商品编号',field:'goodId',align:'center'},
                {title:'商品信息',field:'title',align:'center',formatter:formatTitle},
                {title:'数量',field:'num',align:'center'},
                {title:'价格',field:'price',align:'center'},
                {title:'创建时间',field:'createTime',align:'center',formatter:formatData},
                {title:'修改时间',field:'updateTime',align:'center',formatter:formatData},
            ]
        })
    }


    /**
     * 当内容长度大于30的时候，多余的不显示
     * @param value
     * @returns {string|*}
     */
    function formatTitle(value) {
        var length = value.length;//获取文本长度
        if(length>20){
            return value.substring(0,20)+'....';
        }
        return value;
    }
    //格式化时间
    function formatData(value) {
        return moment(value).format("YYYY-MM-DD hh:mm:ss");
    }

    //隐藏模态框
    function cartDestoryTableAndHideModal() {
        $('#showCartModal').modal('hide');
        // 因为模态窗中的表格, 没有分页，所以将数据直接缓存在客户端，当重新请求的时候并不会发送网络请求，
        // 导致看不同用户的收货地址的时候, 看到的数据是上一次的，所以每次影藏要将表格销毁掉。
        $('#cartDataTable').bootstrapTable('destroy'); // destroy是固定值
    }

    //搜索:
    function querySearch(){
        // 解决翻页之后, 还是停留在以前的页面问题, 使用selectPage, 意思是回到第一页
        $('#userDataTable').bootstrapTable('selectPage', 1);
    }

    //重置按钮
    function resetSearch() {
        var name = $('#name').val('');
        var gender= $('#gender').val('-1');
        var status = $('#status').val('-1');
        var email = $('#email').val('');
        var beginRegisterDate = $('#beginRegisterDate').val('');
        var endRegisterDate = $('#endRegisterDate').val('');
        //刷新页面
        querySearch();
    }

    // 导出Excel
    function downloadExcel() {
        var name = $('#name').val();  //获取查询表单name的值
        var gender = $('#gender').val();
        var status = $('#status').val();
        var email = $('#email').val();
        var begin =  $('#beginRegisterDate').val();
        var end = $('#endRegisterDate').val();
        location.href = "${pageContext.servletContext.contextPath}/system/download?name="+name+"&gender="+gender+"&status="+status+"&email="+email+"&begin="+begin+"&end="+end;
    }


    // 导入Excel
    function uploadExcel(excelEl) {
        var file = excelEl.files[0];
        var fileName = file.name; //获取文件名
        var suffix = fileName.substring(fileName.lastIndexOf('.'));
        if('.xls' != suffix && '.xlsx' != suffix) {
            showErrorBox('请上传正确的excel文件.')
        }else {
            $('body').mLoading({text: '上传中...'});
            var formData = new FormData();
            formData.append("userExcel", file);
            $.ajax({
                url: 'http://localhost:8080/system/uploadExcel',
                dataType: 'json',
                data: formData,
                type: 'post',
                /**
                 * 内容类型。默认值：application/x-www-form-urlencoded;
                 * false表示不设置，将FormData原封不动的直接提价服务器端
                 */
                contentType: false,
                /**
                 * processData 处理数据， 例如get请求，会将data中的数据，name=张三&password=125,
                 * 对于FormData包含文件，此处要为false, 禁止转换
                 */
                processData: false,
                success: function(_data) {
                    // console.log(excelEl.outerHTML)
                    excelEl.outerHTML = excelEl.outerHTML;
                    if(_data.code > 0) {
                        $('body').mLoading({text: '数据导入成功', icon: './images/icons/success.png'});
                        setTimeout(() => {
                            $('body').mLoading('hide');
                            $('#userDataTable').bootstrapTable('refresh');
                        }, 2000);
                    }else {
                        $('body').mLoading('hide');
                        showErrorBox('数据导入失败,请联系管理员.')
                    }
                }
            })
        }
    }

</script>
